<template>
  <div>
    <el-table :data="fields" style="width: 100%">
      <el-table-column prop="title" show-overflow-tooltip label="表单字段">
        <template #default="scope">
          <span v-if="scope.row.required" style="color: #c75450"> * </span>
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="readOnly" label="只读" width="80">
        <template #header>
          <el-radio label="R" v-model="permSelect" @change="allSelect('R')"
            >只读</el-radio
          >
        </template>
        <template #default="scope">
          <el-radio
            v-model="scope.row.perm"
            label="R"
            :name="scope.row.id"
          ></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="writable" label="只读" width="80">
        <template #header>
          <el-radio label="E" v-model="permSelect" @change="allSelect('E')"
            >编辑</el-radio
          >
        </template>
        <template #default="scope">
          <el-radio
            v-model="scope.row.perm"
            label="E"
            :name="scope.row.id"
          ></el-radio>
        </template>
      </el-table-column>

      <el-table-column prop="hide" label="隐藏" width="80">
        <template #header>
          <el-radio label="H" v-model="permSelect" @change="allSelect('H')"
            >隐藏</el-radio
          >
        </template>
        <template #default="scope">
          <el-radio
            v-model="scope.row.perm"
            label="H"
            :name="scope.row.id"
          ></el-radio>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="AuthForm">
//import { it } from "element-plus/es/locale";
import {
  reactive,
  ref,
  watch,
  createApp,
  computed,
  onMounted,
  toRefs,
  getCurrentInstance,
} from "vue";
import { useStore } from "vuex";
//const { uuid, nameClass, delNode } = flowhook();
/* 组件局部注册 */
const app = createApp({});
const store = useStore();
const emit = defineEmits(["update:value"]);
const { currentInstance, proxy } = getCurrentInstance();

const props = defineProps({
  readable: {
    type: Boolean,
    default: false,
  },
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  value: {
    type: Array,
    default: function () {
      return [];
    },
  },
});

const { node, readable, value } = toRefs(props);
const formData = ref([]);
const permSelect = ref("");
// 在组件挂载之后执行的操作
onMounted(() => {
  //formData = proxy.$deepCopy(store.state.form.config);
});

const fields = computed(() => {
  console.log("fields------------------->", store.state.form.config);
  //formData = proxy.$deepCopy(store.state.form.config);
  //JSON.parse(JSON.stringify(store.state.form.config))
  //   return copyItem(JSON.parse(JSON.stringify(store.state.form.config)));
  return JSON.parse(JSON.stringify(store.state.form.config));
});

const allSelect = (type) => {
  permSelect.value = type;
  fields.value.forEach((f) => (f.perm = type));
  emit("update:value", fields.value);
};

const copyItem = (item1) => {
  var item = [];
  item1.forEach((form) => {
    item.push({
      id: form.id,
      name: form.name,
      required: form.options.required,
      perm: "R",
    });
  });
  console.log("---------->", JSON.stringify(item));
  return item;
};

watch(
  value,
  (newValue, oldValue) => {
    console.log("value-----------改变了", JSON.stringify(newValue));
  },
  { immediate: value }
);
</script>

<style>
</style>